<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form onsubmit="handleSubmit(event)" id="myForm">
      <input name="keyword" type="text" />
      <button type="submit">搜索</button>
    </form>
    <!-- <script>
      const myForm = document.querySelector('#myForm')
      function handleSubmit(event) {
        console.log('event', event)
        console.log('event.elements', event.elements)
        console.log('event.elements', event.currentTarget.elements)
        console.log('myForm.elements', myForm.elements)
        event.preventDefault()
        event.stopPropagation()
      }
    </script> -->
    <script type="module">
      import axios from '../node_modules/axios/dist/esm/axios.min.js'
      // module模式不能阻止表单提交时刷新页面
      async function handleSubmit(event) {
        console.log('event', event)
        event.preventDefault()
        event.stopPropagation()
        const res = await axios.get(`http://localhost:3000/search?keyword=vue3%20hook%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5`)
        console.log('res', res)
      }
    </script>
  </body>
</html>
